<template>
  <div class="image-toolbar">
    <div class="toolbar-group">
      <label>滤镜：</label>
      <select v-model="filter" @change="handleChange">
        <option value="none">无</option>
        <option value="grayscale(100%)">灰度</option>
        <option value="blur(2px)">模糊</option>
        <option value="brightness(150%)">亮度</option>
      </select>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, toRefs } from 'vue'
import { ImageFilter } from '@/types'

// 接收父组件传递的元素
const props = defineProps<{
  element: any
}>()
const emit = defineEmits<{
  (e: 'update-element', id: string, payload: Partial<any>): void
}>()

// 解构元素属性
const { filter, id } = toRefs(props.element)

// 处理滤镜变化
const handleChange = () => {
  emit('update-element', id.value, { filter: filter.value as ImageFilter })
}
</script>

<style scoped>
.image-toolbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.toolbar-group select {
  padding: 4px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}
</style>